<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1>知识点1.html插值</h1>
            <h3>html插值可以动态渲染DOM节点，常用来处理开发者不可预知和难以控制的DOM结构
                但它很容易形成漏洞被黑客攻击
            </h3>
            <span v-html="vh"></span>
        <h1>知识点2：v_pre</h1>
            <h3>v_pre可以跳过其所在节点的编译过程，可以利用它跳过有指令语法和插值语法的节点，加快编译速度</h3>
            <span v-pre>{{price}}</span>
        <h1>知识点3：v—bind属性绑定</h1>
            <h3>1.文本插值不能在html元素的属性中使用，如果想要动态的改变属性，可以使用v_bind</h3>
            <p>例1.不使用v_bind</p>
            <p title={{title}}>没有属性绑定</p>
            <p>例2.使用v_bind</p>
            <p v-bind:title="title">属性绑定了喔</p>
            <h3>2.v-bind可以绑定变量，表达式，执行函数等</h3>
            <p>例3.图片动态绑定</p>
            <img :src="srcImg" alt="">
            <p>例4.绑定变量和表达式</p>
            <button :disabled="10+10==30">点击有奖</button>
            <h3>3.因为v-bind使用非常多，所以v-bind可以简写成为:</h3>
            <p :title="title">简单属性绑定</p>
            <h3>课堂实例：通过改变type，实现文本框，复选框，单选框变换</h3>
            <input type="text" name="" id="">
            <input type="radio" name="" id="">
            <input type="checkbox" name="" id="">
            <p>代码实现变换</p>
            <input :type="type">
            <button @click="change('text')">text</button>
            <button @click="change('radio')">radio</button>
            <button @click="change('checkbox')">checkbox</button>
            <h3>课堂练习：动态属性绑定，实现字体改变</h3>
            <span :style="{color:color,fontSize:size+'px'}"> 字体！</span>
            <button @click="color='blue'">蓝色</button>
            <button @click="color='pink'">粉色</button>
            <button @click="color='yellow'">黄色</button>
            <button @click="color='orange'">橙色</button>
            <button @click="bb(30)">字体变大</button>
            <button @click="bb(5)">字体变小</button>


    </div>
</body>
</html>
<script>
    const appConn = Vue.createApp({
        data() {
            return {
                vh:"<span style='color:red'>红色</span>",
                price:100,
                title:'别碰我',
                srcImg:"./1.png",
                type:'text',
                color:'black',
                size:16
            
            }
        },
        methods: {
            change(val){
                this.type=val

            },
            color(val){
                this.color=val
            },
            fontSize(val){
                this.fontSize=val
            }
        },
    }).mount('#app')
</script>